<template>
  <div id="app" class="common-container">
    <div class="header-box">
      <h2 class="headerBox-title">临安区公共机构资源能耗系统</h2>
      <div class="headerBox-content">
        <span>当前用户[{{(userInfo&&userInfo.name)?userInfo.name:''}}]</span>
        <a @click="quit()">[退出]</a>
      </div>
    </div>
    <div class="common-content">
      <div class="sider-nav">
        <el-menu class="el-menu-vertical-demo" :router="true">
          <el-menu-item-group :key="item.title" v-for="item in menu[activeTab].submenu">
            <span slot="title" class="tab-title">
              <i class="el-icon-document"></i>
              {{item.title}}
            </span>
            <el-menu-item :key="sub.name" :index="sub.url" v-for="sub in item.submenu" @click="selectItem(item,sub.title)">
              <i class="el-icon-caret-right"></i> {{sub.title}}
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </div>
      <div class="side-tabBox">
        <div class="side-tabTop">
          <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
            <el-tab-pane :key="key" :label="val.title" :name="key" v-for="(val,key) in menu">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item> {{val.title}}</el-breadcrumb-item>
                <el-breadcrumb-item :key="itemBread" v-for="itemBread in breadcrunb"> {{itemBread}}</el-breadcrumb-item>
              </el-breadcrumb>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="side-tabContent">
          <router-view class="main-content"></router-view>
          <!--<div v-if="showHome.isShow" class="home-welcome">
            <h2>欢迎使用桐庐县公共机构资源能耗统计管理系统</h2>
            <div class="addUser-listBox">
              <div class="addUser-listRow">
                <div class="addUser-listCol1">
                  <p>登录账户：</p>
                </div>
                <div class="addUser-listCol2">
                  <span>{{userInfo.name}}</span>
                </div>
              </div>
              <div class="addUser-listRow">
                <div class="addUser-listCol1">
                  <p>IP地址：</p>
                </div>
                <div class="addUser-listCol2">
                  <span>112.17.112.137</span>
                </div>
              </div>
              <div class="addUser-listRow">
                <div class="addUser-listCol1">
                  <p>当前时间：</p>
                </div>
                <div class="addUser-listCol2">
                  <span>{{nowTime|datetime('yyyy年MM月dd日 hh:mm:ss')}}</span>
                </div>
              </div>
            </div>
          </div>
          <router-view class="main-content"></router-view>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const menu =
    {
      user: {
        title: '用户管理',
        submenu: [
          {
            title: '用户维护',
            submenu: [
              { name: '1', title: '新增用户', url: '/addUser' },
              { name: '2', title: '用户编辑', url: '/editorUser' }
            ]
          },
          {
            title: '密码维护',
            submenu: [
              { name: '3', title: '更改登录密码', url: '/changePwd' }
            ]
          }
        ]
      },
      info: {
        title: '信息发布',
        submenu: [
          {
            title: '节能动态',
            submenu: [
              { name: '1', title: '节能动态新增', url: '/addInfo/1/0' },
              { name: '2', title: '节能动态编辑', url: '/editorInfo/1' }
            ]
          },
          {
            title: '通知公告',
            submenu: [
              { name: '3', title: '通知公告新增', url: '/addInfo/2/0' },
              { name: '4', title: '通知公告编辑', url: '/editorInfo/2' }
            ]
          },
          {
            title: '情况通报',
            submenu: [
              { name: '5', title: '情况通报新增', url: '/addInfo/3/0' },
              { name: '6', title: '情况通报编辑', url: '/editorInfo/3' }
            ]
          },
          {
            title: '政策法规',
            submenu: [
              { name: '7', title: '政策法规新增', url: '/addInfo/4/0' },
              { name: '8', title: '政策法规编辑', url: '/editorInfo/4' }
            ]
          },
          {
            title: '节能知识',
            submenu: [
              { name: '9', title: '节能知识新增', url: '/addInfo/5/0' },
              { name: '10', title: '节能知识编辑', url: '/editorInfo/5' }
            ]
          }
        ]
      },
      check: {
        title: '上报审核',
        submenu: [
          {
            title: '单位信息',
            submenu: [
              { name: '1', title: '单位基本信息', url: '/unitInfo' },
              { name: '2', title: '单位信息汇总', url: '/unitCollect' }
            ]
          },
          {
            title: '公务车辆',
            submenu: [
              { name: '3', title: '公务车辆基本情况', url: '/carInfo' },
              { name: '4', title: '公务用车油耗', url: '/carOil' }
            ]
          },
          {
            title: '能源消耗',
            submenu: [
              { name: '5', title: '能源消耗申报', url: '/indexEnergy' },
              { name: '6', title: '能源消耗申报汇总', url: '/indexEnergyCollect' }
            ]
          },
          {
            title: '机房能耗',
            submenu: [
              { name: '5', title: '机房能耗申报', url: '/computerList' },
              { name: '6', title: '机房能耗申报汇总', url: '/computerCollect' }
            ]
          }
        ]
      },
      table: {
        title: '汇总报表',
        submenu: [
          {
            title: '汇总报表',
            submenu: [
              { name: '1', title: '能源消耗汇总(按月度)', url: '/monthSummary' },
              { name: '2', title: '能源消耗汇总(按单位)', url: '/unitSummary' },
              { name: '3', title: '能源消耗年度对比汇总', url: '/yearSummary' },
              { name: '4', title: '公务用车油耗汇总', url: '/oilSummary' }
            ]
          }
        ]
      },
      report: {
        title: '图表分析',
        submenu: [
          {
            title: '柱状图',
            submenu: [
              { name: '1', title: '水消耗', url: '/reportBar/WaterTotal/WaterAmount' },
              { name: '2', title: '电消耗', url: '/reportBar/ElectricityTotal/ElectricityAmount' },
              { name: '3', title: '车辆用油消耗', url: '/carBar' },
              { name: '4', title: '燃气消耗', url: '/reportBar/GasTotal/GasAmount' },
              { name: '5', title: '燃料用油消耗', url: '/reportBar/DieselTotal/DieselAmount' },
              { name: '6', title: '燃煤能源消耗', url: '/reportBar/CoalTotal/CoalAmount' },
            ]
          },
          {
            title: '折线图',
            submenu: [
              { name: '7', title: '水消耗', url: '/reportLine/WaterTotal/WaterAmount' },
              { name: '8', title: '电消耗', url: '/reportLine/ElectricityTotal/ElectricityAmount' },
              { name: '9', title: '车辆用油消耗', url: '/carLine' },
              { name: '10', title: '燃气消耗', url: '/reportLine/GasTotal/GasAmount' },
              { name: '11', title: '燃料用油消耗', url: '/reportLine/DieselTotal/DieselAmount' },
              { name: '12', title: '燃煤能源消耗', url: '/reportLine/CoalTotal/CoalAmount' },
            ]
          }
        ]
      }
    }
  export default {
    data() {
      return {
        userInfo: {},
        activeTab: 'user',
        menu,
        nowTime: new Date(),
        breadcrunb: [],
      }
    },
    methods: {
      handleClick() {
        this.breadcrunb = [];
      },
      selectItem(item, sub) {
        this.showHome.isShow = false
        this.breadcrunb = []
        this.breadcrunb.push(item.title)
        this.breadcrunb.push(sub)
      },
      // setTime() {
      //   setInterval(() => {
      //     this.nowTime = new Date()
      //   }, 1000)
      // },
      quit() {
        this.$confirm('确定退出?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.clear()
          location.href = 'http://112.17.112.137:8888/login.html'
        })
      }
    },
    created() {
      // this.setTime()
      try {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
        console.log(this.userInfo, 'this.userInfo')
        if (this.userInfo.role && this.userInfo.role == '0') {
          localStorage.clear()
          location.href = 'http://112.17.112.137:8888/login.html'
        }
        console.log(userInfo, '123')
      } catch (error) {

      }
    }
  }

</script>
<style lang="scss" scoped>
  .header-box {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #0082df;
    color: #fff;
    h2 {
      font-size: 24px;
    }
    .headerBox-content {
      position: absolute;
      right: 0;
      top: 0;
      min-width: 210px;
      padding-right: 20px;
      height: 50px;
      display: flex;
      align-items: center;
      flex-direction: row;
      span {
        margin-right: 20px;
        display: inline-block;
      }
      a {
        color: #fff;
        cursor: pointer;
        text-decoration: underline;
        &:hover {
          color: #3399cc;
        }
      }
    }
  }

  .common-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 15px;
    padding-bottom: 15px;
    .sider-nav {
      width: 240px;
      height: 750px;
      border: 1px solid #dcdfe6;
      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #fff; // border: 1px solid #b4c9c6;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .side-tabBox {
      width: 98.5%;
      min-height: 750px;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      .side-tabTop {
        height: 80px;
        width: 100%;
      }
      .side-tabContent {
        width: 100%; // flex: 1;
        margin-top: 20px;
        display: flex;
        border: 1px solid #dcdfe6;
        min-height: 650px; // height: 650px;
        // overflow: auto;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #fff;
      }
    }
  }

  .home-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 15px;
    background-color: #fff;
    h2 {
      height: 120px;
      width: 100%;
      font-size: 20px;
      line-height: 120px;
      text-align: center;
    }
  }

  .tab-title {
    color: #3399cc;
  }

  .addUser-listBox {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    display: flex;
    flex-direction: column;
    .addUser-listRow {
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #dcdfe6;
      .addUser-listCol1 {
        display: flex;
        flex-direction: row;
        flex: 1;
        height: 40px;
        align-items: center;
        justify-content: flex-end;
        color: darkgray;
      }
      .addUser-listCol2 {
        display: flex;
        height: 40px;
        border-left: 1px solid #dcdfe6;
        align-items: center;
        flex-direction: row;
        flex: 1.2;
        padding-left: 8px;
        span {
          margin-left: 5px;
          font-size: 16px;
        }
      }
    }
  }

  .el-menu {
    background: transparent;
    border-right: none;
  }

  .el-menu-item,
  .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
</style>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>